<!-- subpkg_consult/description/index.vue -->
<script setup>
	import { computed, ref } from 'vue';
	import { useConsultStore } from '@/stores'
	const store = useConsultStore()
	
	const props = defineProps({
		type: String,
		depId: String,
		illnessType: String
	})
	
	// 记录病情描述的数据
	const illnessInfo = ref({
		illnessDetail: '', //病情详情描述
		illnessTime: '', //患病时间
		consultFlags: '', // 是否就诊过
		pictures: []
	})
	
	// 定义患病时间的例子
	const illnessTimes = [
		{ value: 1, text: '一周内'},
		{ value: 2, text: '一个月内'},
		{ value: 3, text: '半年内'},
		{ value: 4, text: '大于半年'},
	]
	
	// 点击切换患病时间
	const onChangeTime = (value) => {
		illnessInfo.value.illnessTime = value
	}
	
	 const consultFlags = [
	    { value: 1, text: '就诊过' },
	    { value: 0, text: '没有就诊过' },
	  ]
	
	// 点击切换是否就诊过
	const onChangeConsultFlags = (value) => {
		illnessInfo.value.consultFlags = value
	}
	
	// 是否可以点击下一步
	const nextButton = computed(() => {
		return ( 
			illnessInfo.value.consultFlags !== '' &&
			illnessInfo.value.illnessDetail !== '' &&
			illnessInfo.value.illnessTime !== ''
		)
	})
	
	// 点击下一步按钮
	const onNext = () => {
		if(illnessInfo.value.illnessDetail === '') {
			return uni.showToast({
				icon: 'none',
				title: '请填写病情详情'
			})
		}
		if(illnessInfo.value.illnessTime === '') {
			return uni.showToast({
				icon: 'none',
				title: '请选择患病时间'
			})
		}
		if(illnessInfo.value.consultFlags === '') {
			return uni.showToast({
				icon: 'none',
				title: '请选择是否就诊过'
			})
		}
		// 将数据存放到pinia中
		// 调用useConsultStore中的方法
		store.setConsult(illnessInfo.value)
		// 将数据存储到 pinia 中
		store.setType(props.type)
		store.setDepId(props.depId)
		store.setIllnessType(props.illnessType)
		// 跳转页面
		
	}
	
	// 如果有数据就提示用户是否要回显数据
	if(store.consult.illnessDetail) {
		uni.showModal({
			title: '温馨提示',
			content: '是否恢复之前填写的病情信息？',
			success: (res) => {
				if(res.confirm) {
					illnessInfo.value.illnessDetail = store.consult.illnessDetail
					illnessInfo.value.illnessTime = store.consult.illnessTime
					illnessInfo.value.consultFlags = store.consult.consultFlags
					illnessInfo.value.pictures = store.consult.pictures || []
				}
			}
		})
	}
	
</script>

<template>
  <scroll-page>
    <view class="description-page">
      <!-- 在线医生 -->
      <view class="doctor-online">
        <image
          src="/static/uploads/doctor-avatar-2.png"
          class="doctor-avatar"
        />
        <view class="doctor-info">
          <view class="name">在线医生</view>
          <view class="message">
            请描述你的疾病或症状、是否用药、就诊经历，需要我听过什么样的帮助
          </view>
          <view class="tips">
            <text class="iconfont icon-shield"></text>
            内容仅医生可见
          </view>
        </view>
      </view>
      <!-- 患者信息 -->
      <view class="patient-info">
        <view class="description">
          <uni-easyinput
            type="textarea"
            :styles="{ backgroundColor: '#f6f6f6' }"
            :input-border="false"
            placeholder-style="font-size: 30rpx; color: #979797"
            placeholder="请详细描述您的病情,病情描述不能为空"
			v-model="illnessInfo.illnessDetail"
          />
        </view>

        <view class="title">本次患病多久了？</view>
        <view class="tags">
          <text class="tag "
				v-for="item in illnessTimes"
				:key="item.value"
				@click="onChangeTime(item.value)"
				:class="{ active: item.value === illnessInfo.illnessTime }"
		  >
			{{ item.text }}
		  </text>
        </view>

        <view class="title">此次病情是否去医院就诊过？</view>
        <view class="tags">
          <text class="tag"
				v-for="item in consultFlags"
				:key="item.value"
				@click="onChangeConsultFlags(item.value)"
				:class="{ active: item.value === illnessInfo.consultFlags }"
			>
				{{ item.text }}
		  </text>
        </view>
      </view>
      <!-- 上传图片 -->
      <view class="patient-picture">
        <uni-file-picker
          title="上传病情相关图片 (仅医生可见)"
          limit="8"
          :image-styles="{ width: '160rpx', height: '160rpx' }"
          file-extname="png,jpg,gif,webp"
		  v-model="illnessInfo.pictures"
        />
      </view>
    </view>
    <!-- 下一步操作 -->
    <view class="next-step">
      <button class="uni-button" :disabled="!nextButton" @click="onNext">下一步</button>
    </view>
  </scroll-page>
</template>

<style lang="scss">
@import './index.scss';
</style>